<template>
  <div class="per-box">
    <top></top>
    <!-- 中间部分 -->
    <div class="wrap-center">
      <!-- 左边信息 -->
      <div class="left-box">
        <span class="top-input"><input type="text" placeholder="搜索职位,公司" /></span>
        <span class="seek-input iconfont  icon-sousuo"></span>
        <div class="nav-list-box">
          <p class="nav-list-title">web前端</p>
          <span class="nav-t" :class='array==item?"res":""' v-for="(item,index) in data" :key="index" @click="nav(item)">{{item}}</span>
        </div>
        <div class="el">
          <el-dropdown v-for="(nav,navindex) in navlist" :key="navindex+'a'">
            <div class="wrap-select">
              <span class="el-dropdown-link">
                {{nav.name}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(nav2,navindex2) in nav.value" :key="navindex2">{{nav2}}}</el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </el-dropdown>
        </div>
        <!-- 招聘列表 -->
        <div class="seek-box" v-for="(seekitem,index6) in seek" :key="index6">
          <div class="wrap-seek">
            <!-- 发布信息 -->
            <div class="issue-left-box">
              <router-link :to="{}">
                <div class="issue-title">{{seekitem.issue_title}}</div>
              </router-link>
              <div class="wrap-content">
                <span class="issue-pay">{{seekitem.issue_wage}}</span>
                <span class="issue-content">{{seekitem.issue_content}}</span>
              </div>
            </div>
            <!-- 企业信息 -->
            <div class="issue-right-box">
              <router-link :to="{}">
                <div class="issue-title">{{seekitem.parent_title}}
                  <span class="iconfont icon-anquan"></span>
                </div>
              </router-link>
              <div class="wrap-content">
                <span class="issue-content">{{seekitem. parent_content}}</span>
              </div>
            </div>
            <!-- 企业logo -->
            <div class="issue-img-box">
              <img :src="seekitem.parent_img">
            </div>
          </div>
          <!-- 底部 -->
          <div class="seek-bottom">
            <div class="left-seek-bottom">
              <span class="move-box" v-for="(letbottom,ind) in seekitem.issue_claim" :key="ind"> {{letbottom}}</span>
            </div>
            <div class="right-seek-bottom">
              {{seekitem.parent_intro}}
            </div>
          </div>
        </div>
      </div>
      <!-- 右边信息 -->
      <div class="right-box">
        <div class="personage-box">
          <div class="personage-img-box">
            <img src="../../static/img/banner1.jpg">
          </div>
          <a href="javascript:;" class="edit">编辑</a>
          <div class="name-box">{{name.name}}</div>
          <div class="age-box">{{name.age}}
            <i class="xian">|</i>
            {{name.in}}
            <i class="xian">|</i>
            {{name.education}}
          </div>

          <div class="state">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- 面试 -->
          <div class="show-box">
            <a href="javasrcipt:;" class="show-tetx">
              <b>16</b>沟通过
            </a>
            <a href="javasrcipt:;" class="show-tetx">
              <b>16</b>面试
            </a>
            <a href="javasrcipt:;" class="show-tetx">
              <b>16</b>已投简历
            </a>
            <a href="javasrcipt:;" class="show-tetx">
              <b>16</b>收藏
            </a>
          </div>
        </div>

        <!-- 简历 -->
        <div class="resume-box">
          <p class="resume-title">附件管理</p>
          <div class="resume">
            <span class="el-icon-document">附件简历</span>
            <span class="el-icon-delete re"></span>
          </div>

          <button class="tip">上传简历</button>
          <div class="line">
            <a href="javascript:;">简历预览</a>
            <a href="javascript:;">设置</a>

          </div>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>
<script>
import top from "./top";
import bottom from "./bottom";
export default {
  components: { top, bottom },
  data() {
    return {
      data: [
        "不限",
        "东湖区",
        "南湖区",
        "青山湖区",
        "华丽去",
        "安义县",
        "新建区",
        "南昌县"
      ],
      navlist: [
        { name: "工作经验", value: ["不限", "在校生", "1-3年", "5年以上"] },
        { name: "学历要求", value: ["不限", "在校生", "1-3年", "5年以上"] },
        { name: "薪资要求", value: ["不限", "在校生", "1-3年", "5年以上"] },
        { name: "公司要求", value: ["不限", "在校生", "1-3年", "5年以上"] },
        { name: "融资情况", value: ["不限", "在校生", "1-3年", "5年以上"] }
      ],
      array: [],
      seek: [
        {
          id: 1,
          parent_title: "快手",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner1.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        },
        {
          id: 2,
          parent_title: "拉钩",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner2.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        },
        {
          id: 3,
          parent_title: "华为",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner1.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        },
        {
          id: 4,
          parent_title: "小米",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner2.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        }
      ],
      name: { name: "张三", age: "21岁", education: "本科", in: "20年应届生" },
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: ""
    };
  },
  mounted() {
    this.array = [this.data[0]];
  },
  methods: {
    nav(val) {
      this.$set(this.array, 0, val);
    }
  }
};
</script>
<style scoped>
/* 右侧 */
.resume-box {
  width: 100%;
  min-height: 100px;
  background: #fff;
  margin-top: 45px;
  padding: 10px 20px;
  box-sizing: border-box;
}
.line {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 10px 0px;
}
.line a {
  color: #000;
}
.resume {
  color: #555;
  font-size: 15px;
  margin: 10px 0px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.tip {
  width: 100%;
  height: 35px;
  display: block;
  background: #00b38a;
  border: none;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  margin: 10px auto;
  margin-top: 30px;
}
.right-box {
  width: 27.3%;
  float: right;
  /* border: 1px solid blue; */
}
.el {
  background: #fff;
}
.per-box {
  background: #fafafa;
  overflow: hidden;
}
.personage-box {
  width: 100%;
  min-height: 100px;
  background: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 0px 20px;
  box-sizing: border-box;
}
.personage-img-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 30px;
}
.personage-img-box img {
  width: 100%;
  height: 100%;
}
.edit {
  position: absolute;
  color: #555;
  right: 35px;
  top: 15px;
}
.edit:hover {
  color: aqua;
}
.age-box {
  font-size: 14px;
  margin: 5px 0px;
}
.name-box {
  margin-top: 15px;
}
.xian {
  margin: 0px 5px;
  color: #51586d;
}
.state {
  width: 100%;
  margin: 15px 0px;
}
.el-select {
  width: 100%;
}
.show-tetx {
  display: inline-block;
  vertical-align: top;
  width: 23%;
  font-size: 16px;
  line-height: 18px;
  color: #8d92a1;
  text-align: center;
}
.show-tetx b {
  display: block;
  color: #555;
}
.show-box {
  margin: 20px 0px;
}

p {
  padding: 0px;
  margin: 0px;
}
.wrap-center {
  margin: 0 auto;
  /* border: 1px solid red; */
  max-width: 1200px;
  margin-top: 30px;
  overflow: hidden;
}
/* 左侧 */
.left-box {
  width: 70%;
  float: left;
  /* border: 1px solid red; */
}
.top-input {
  display: inline-block;
  width: 88%;
  height: 35.5px;
}
.top-input input {
  border: 1px solid #00bfff;
  padding-left: 10px;
  width: 100%;
  height: 100%;
}
.seek-input {
  display: inline-block;
  width: 11.2%;
  background: #00bfff;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
.res {
  color: red;
}
.nav-list-box {
  font-weight: 500;
  font-size: 14px;
  color: #51586d;
}
.nav-list-box {
  padding: 10px 15px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 25px;
}
.nav-t {
  display: inline-block;
  margin: 5px 3px;
  padding: 5px 10px;
}
.nav-t:hover {
  color: red;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.wrap-select {
  padding: 10px 15px;
  margin: 0px 20px;
}
.wrap-select::after {
  content: "";
  display: block;
  clear: both;
}
/* 工作列表 */

.seek-box {
  width: 100%;
  min-height: 120px;
  border: 1px solid #ccc;
  margin-top: 25px;
  background: #fff;
}

.issue-left-box {
  width: 50%;
  /* border: 1px solid red; */
  float: left;
}

.issue-right-box {
  width: 40%;
  float: left;
  /* border: 1px solid red; */
}

.issue-img-box {
  width: 9%;
  float: left;
  height: 70px;
  margin-bottom: 10px;
  /* border: 1px solid red; */
}

.issue-img-box img {
  width: 100%;
  height: 100%;
}

.wrap-seek {
  padding: 0px 15px;
  padding-top: 15px;
  box-sizing: border-box;
}

.issue-pay {
  color: red;
  margin-right: 18px;
}

.issue-content {
  color: #555;
}

.wrap-content {
  margin: 8px 0px;
}

.issue-title {
  color: #00b38a;
  font-size: 17px;
}

.seek-bottom {
  clear: both;
  background: #fafafa;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  box-sizing: border-box;
  height: 50px;
}

.left-seek-bottom {
  width: 49%;
  float: left;
}

.right-seek-bottom {
  width: 49%;
  float: left;
  font-size: 14px;
}

.move-box {
  padding: 2px 8px;
  display: inline-block;
  margin-right: 10px;
  border: 1px solid #ccc;
  font-size: 13px;
}
</style>
